<template>
  <div class="tinymce-editor">
    <Editor
      :id="editorId"
      v-model="editorValue"
      :init="editorInit"
    />
  </div>
</template>

<script>
// 引入上传图片
// 引入组件
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/icons/default/icons'
import 'tinymce/themes/silver'
// 引入富文本编辑器主题的js和css
import 'tinymce/themes/silver/theme.min'
import 'tinymce/skins/ui/oxide/skin.min.css'
// 扩展插件
import 'tinymce/plugins/code'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/wordcount' // 字数统计插件
import 'tinymce/plugins/template'// 模板插件
import 'tinymce/plugins/paste'
import 'tinymce/plugins/preview'

export default {
  name: 'TinymceEditor',
  components: { Editor },
  props: {
    height: {
      type: Number,
      default: 500
    },
    id: {
      type: String,
      default: 'tinymceEditor'
    },
    value: {
      type: String,
      default: ''
    },
    plugins: {
      type: [String, Array],
      default: 'link lists code table wordcount preview paste contextmenu textcolor'
    },
    toolbar: {
      type: [String, Array],
      default: 'bold italic underline strikethrough table | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent | code'
    }
  },
  data() {
    return {
      editorInit: {
        language_url: `/tinymce/langs/zh_CN.js`,
        language: 'zh_CN',
        skin_url: `/tinymce/skins/ui/oxide`,
        content_css: `/tinymce/skins/content/default/content.css`,
        content_style: '* { padding:0 margin:0 } img {max-width:100% !important }',
        plugin_preview_width: 375, // 预览宽度
        plugin_preview_height: 200,
        lineheight_val: '1 1.1 1.2 1.3 1.35 1.4 1.5 1.55 1.6 1.75 1.8 1.9 1.95 2 2.1 2.2 2.3 2.4 2.5 2.6 2.7 2.8 3 3.1 3.2 3.3 3.4 4 5',
        plugins: this.plugins,
        powerpaste_word_import: 'merge',
        toolbar: this.toolbar,
        height: 400,
        statusbar: true, // 底部的状态栏
        menubar: false, // 最上方的菜单
        branding: false // 水印“Powered by TinyMCE”
        // 自定义逻辑替换 Tinymce 的默认媒体嵌入逻辑
      },
      editorId: this.id,
      newValue: ''
    }
  },
  computed: {
    editorValue: {
      get() {
        return this.value
      },
      set(val) {
        this.newValue = val
      }
    }
  },
  watch: {
    newValue(newValue) {
      this.$emit('input', newValue)
    }
  },
  mounted() {
    tinymce.init({})
  },
  methods: {
    clear() {
      this.editorValue = ''
    }
  }
}
</script>
